<!--模板-->
<template>
  <div class="center-panel">
    <el-row class="top-panel">
      <dv-border-box10>
        <el-col class="player-container" :span="24">
          <!-- 视频容器 -->
          <div id="video-container" class="player"></div>
        </el-col>
      </dv-border-box10>
    </el-row>

    <el-row class="bottom-panel">
      <dv-border-box10>
        <el-col :span="24">
          <div class="carousel-map">
            <el-carousel :interval="4000" @change="changeImg" style="width: 100%;margin-top: 1px;" trigger="click"
                         height="290px">
              <el-carousel-item v-for="(item,index)  in imageList" :key="index">
                <el-image
                  :class="className"
                  style="width: 100%; height: 100%"
                  :src="item"
                  fit="fill"></el-image>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
      </dv-border-box10>
    </el-row>
  </div>

</template>

<!--样式-->
<style scoped>
.center-panel {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.top-panel {
  height: 100%;
  width: 100%;
  display: flex;
}
.bottom-panel {
  height: 100%;
  width: 100%;
}
.player-container {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center; /* 水平居中 */
  align-items: center;
  padding: 8px;
  box-sizing: border-box;
}
.player {
  height: 100%;
  width: 100%;
}
.carousel-map {
  width: 100%;
  height: 286px;
  overflow: hidden;
  justify-content: center; /* 水平居中 */
  align-items: center;
  padding: 8px;
  box-sizing: border-box;

  .lun-img {
    transform: scale(1.2);
  }

  .lun-img-two {
    transition: all 1s;
    transform: scale(1);
  }

  .el-carousel__item.is-animating {
    transition: all 0.6s;
  }
}

</style>





<!--行为-->
<script>
import EZUIKit from 'ezuikit-js';
import axios from "axios";
let player = null;
export default {
  name: 'VideoPlayer',
  data() {
    return {
      accessToken: 'ra.5re72ai38g4y7gky9ghls5dzb2equqku-491d6ysuja-0bzlevz-5zrd54nns',
      videoUrl: 'ezopen://open.ys7.com/AC0174303/1.hd.live',
      imageList: [
          "https://images-1333018258.cos.ap-chengdu.myqcloud.com/agri/1.png",
          "https://images-1333018258.cos.ap-chengdu.myqcloud.com/agri/2.png"
      ],
      className: ""
    };
  },
  methods: {
    async fetchToken() {
      try {
        const response = await axios.get(`/token/camera`);
        if (response.data && typeof response.data === 'string') {
          this.accessToken = response.data;
        } else {
          console.error('Invalid data format:', response.data);
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    },
    // 初始化播放器
    async init() {
      try {
        // 先确保获取到 accessToken
        await this.fetchToken();

        if (player) {
          this.destroy(); // 销毁已存在的播放器
        }
        player = new EZUIKit.EZUIKitPlayer({
          id: 'video-container', // 视频容器ID
          accessToken: this.accessToken,
          url: this.videoUrl,
          width: 560,
          height: 286,
          template: 'pcLive', // 播放模板
          handleError: (error) => {
            console.error('播放器初始化失败:', error);
          },
          env: {
            domain: 'https://open.ys7.com', // 视频平台域名
          },
        });
        window.player = player; // 将播放器实例绑定到全局 window 对象
      } catch (error) {
        console.error('初始化失败:', error);
      }
    },

    // 播放视频
    play() {
      if (!player) {
        console.error('播放器尚未初始化');
        return;
      }
      player.play().then((data) => {
        console.log('播放成功:', data);
      }).catch((error) => {
        console.error('播放失败:', error);
      });
    },

    // 销毁播放器
    destroy() {
      if (player) {
        player.destroy().then((data) => {
          console.log('播放器销毁成功:', data);
        }).catch((error) => {
          console.error('播放器销毁失败:', error);
        });
        player = null;
      }
    },
  },
  mounted() {
    this.init();
    this.fetchToken();
    this.className = "lun-img";
    setTimeout(() => {
      this.className = "lun-img-two";
    }, 300);
  },
  beforeDestroy() {
    this.destroy(); // 在组件销毁时清理播放器资源
  },
};
</script>